 <template>
  <!-- 选择职务 -->
  <div class="select-position" style="margin: -10px 0;">
    <!-- 搜索区域 -->
    <SelfAdaption style="margin: 0 -10px;">
      <Form :model="formInfo" ref="deptForm" :rules="rules" slot="adaption-bar" inline> 
        <!-- 职务编码 -->
        <Form-item prop="companyCode" :label="$t('module.orgManage.positionCode')">
          <Input
            type="text"
            
            v-model.trim="formSearch.code"
            :maxlength="30"
            :placeholder="$t('module.orgManage.pleaseInput')"
            @on-enter="search"
          ></Input>
        </Form-item>
    
        <!-- 职务名称 -->
        <Form-item prop="companyName" :label="$t('module.orgManage.positionName')">
          <Input
            type="text"
            
            v-model.trim="formSearch.name"
            :maxlength="30"
            :placeholder="$t('module.orgManage.pleaseInput')"
            @on-enter="search"
          ></Input>
        </Form-item>
         
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item> 
      </Form>
    </SelfAdaption>
    

    <el-table
      :header-cell-style="{background:'#f5f5f5'}"
      :data="tableData"
      style="width: 100%;;"
      :border="false"
      @row-click="select">
      <el-table-column
        prop="code"
        :label="$t('module.orgManage.positionCode')">
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('module.orgManage.positionName')">
      </el-table-column>
    </el-table>

    <div style="margin: 30px 0px 10px 10px;overflow: hidden" v-if="page.total > 0">
      <div style="float: right;">
        <Page 
          :total="page.total" 
          :page-size-opts="[10, 20, 50, 100]"
          show-sizer 
          show-total
          size="small"
          @on-change="changeCurrentPage"
          @on-page-size-change="changeCurrentSize"/>
      </div>
    </div> 
  </div>
</template>

<script>
import { getAllJob } from "@/api/orgApi.js";
import locales from "../locales.js";
import { getDepartmentTemplateList,templateDetail} from "@/api/extendAttrApi.js";

export default {
  mixins: [locales],
  components: {},
  props: {
    propsPosintionInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    orgInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    // 部门编码
    const validateOrgCode = (rule, value, callback) => {
      if (value != value.trim()) {
        callback(new Error(this.$t("module.orgManage.codeNoBalnk")));
      } else if (value.length > 30) {
        callback(new Error(this.$t("module.orgManage.codeMaxFifty")));
      } else if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
        callback(new Error(this.$t("module.orgManage.codeContain")));
      }
      callback();
    };
    // 部门名称
    const validateOrgName = (rule, value, callback) => {
      if (value != value.trim()) {
        callback(new Error(this.$t("module.orgManage.noBalnk")));
      } else if (value.length > 100) {
        callback(new Error(this.$t("module.orgManage.nameMaxFifty")));
      }
      callback();
    };
    // 部门描述
    const validateOrgDesc = (rule, value, callback) => {
      if (value != null && value != value.trim() && value.trim() === "") {
        callback(new Error(this.$t("module.orgManage.enterLegalDesc")));
      }
      if (value != null && value.length > 1000) {
        callback(new Error(this.$t("module.orgManage.descMaxTH")));
      }
      callback();
    };
    return {
      jobInfo: {
        ascs: [],
        condition: {
          enabled: 1,
          tenantCode: "",
        },
        descs: [],
        pageNum: 0,
        pageSize: 10
      },
      page: {
        total: 0
      },
      tableData: [],
      formSearch: {
        name: "",
        code: ""
      },
      formInfo: {
        isSupervisorJobs: 1, //是否主管职位
        orgCode: "", //部门编码
        orgName: "", //部门名称
        orderNo: 1, //排序号
        enabled: 1, //状态
        orgDesc: "", //描述
        parentType: this.orgInfo.idx == "org" ? 1 : 2, // 1代表在组织下新建根部门 2代表在根部门下新建子部门
        orgType: 10, // 0 类型为组织的公司 1 类型为组织的集团 10类型为部门 用于后端区分在组织树节点下展示组织节点而不包括部门节点
        tenantCode: this.orgInfo.tenantCode, //租户编码
        currentOrgId: this.orgInfo.currentOrgId, //组织id
        parentId: this.orgInfo.parentId, //选中的组织id或部门id
        attributeContext:""
      },
      dapartTemplateList:[],
      isShow:false,
      isShowTemplate:true,
       ruleList:[],
       fcApi:null,
      // 字段规则
      rules: {
        orgCode: [{ validator: validateOrgCode, trigger: "blur", required: true }],
        orgName: [{ validator: validateOrgName, trigger: "blur", required: true }],
        orderNo: [{ required: true }],
        orgDesc: [{ validator: validateOrgDesc, trigger: "blur" }]
      }
    };
  },
  created: function() {
    this.getAllJob() 
    this.$emit("SetTitle", this.$t("module.orgManage.jobSelection"));
    this.$emit("SetPageWidth", 800);
    this.$emit("SetPageActions", [
      // {
      //   text: this.$t("common.save"),
      //   theme: "primary",
      //   handle: () => {
      //     this.onOk();
      //   }
      // },
      // {
      //   text: this.$t("common.close"),
      //   theme: "primary",
      //   handle: () => {
      //     this.$emit("Close", { index: 100 });
      //   }
      // }
    ]);
    // this.getDepartmentTemplate([1]);
  },
  computed:{
       extendedAttrTitle:function(){
        return this.$t("module.orgManage.extendedAttr")
    },
    ruleData(){
        return this.ruleList
    },
    option() {
      return {
        resetBtn: false,
        submitBtn: false,
        form: {
          labelWidth: 100,
          size: "default"
        }
      };
    },
  },
  methods: {
    // 点击表格 选择职务
    select(row) {
      this.$emit("Close", row);
    },
    // 查询
    search() {
      this.jobInfo.condition.code = this.formSearch.code
      this.jobInfo.condition.name = this.formSearch.name
      this.jobInfo.pageNum = 1
      this.getAllJob()
    },
    // 重置
    formReset() {
      this.formSearch.name = ""
      this.formSearch.code = ""
      this.jobInfo.condition.code = ""
      this.jobInfo.condition.name = ""
      this.jobInfo.pageNum = 1
      this.getAllJob()
    },
    // 分页
    changeCurrentPage(page) {
      this.jobInfo.pageNum = page
      this.getAllJob()
    },
    changeCurrentSize(size) {
      this.jobInfo.pageSize = size
      this.getAllJob()
    },
    // 获取表格信息
    getAllJob() {
      this.jobInfo.condition.tenantCode = this.propsPosintionInfo.tenantCode
      getAllJob(this.jobInfo).then(response => {
        this.page.total = response.data.total
        this.tableData = response.data.records
      });
    },
    // 获取部门模板列表
    // 获取公司模板数据
    getDepartmentTemplate(statusList) {
      getDepartmentTemplateList(statusList).then(res => {
          if (res.data.length == 0) {
              this.isShowTemplate = false
              return
          }
        this.dapartTemplateList = res.data;
      });
    },
    onOk() {
        this.formInfo.attributeValue = {
            template: this.ruleData
        }
      this.$refs["deptForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.orgInfo.newOrEdit == "edit") {
            updateDept(this.formInfo)
              .then(data => {
                this.loading = false;
                this.$message.success({
                  content: this.$t("module.orgManage.editSuccess"),
                  duration: 3
                });
                this.modal = false;
                // this.$emit("Close", true);
                // 把数据传回页面
                let params = {
                  data: this.formInfo,
                  newOrEdit: "edit"
                };
                this.$emit("Close", params);
              })
              .catch(data => {
                this.loading = false;
              });
          } else {
            addDept(this.formInfo)
              .then(data => {
                this.loading = false;
                this.$message.success({
                  content: this.$t("module.orgManage.addSuccess"),
                  duration: 3
                });
                this.modal = false;
                // this.$emit("Close", data.data);
                // this.formInfo.orgId = data.data;
                // 把数据传回页面
                let params = {
                  // data: this.formInfo,
                  newOrEdit: "new"
                };
                this.$emit("Close", params);
              })
              .catch(data => {
                this.loading = false;
              });
          }
        } else {
          this.$message.error(this.$t("common.formValidateFailed"));
        }
      });
    },
    // 切换模板
    changeSelect(val) {
      templateDetail(val).then(res => {
            this.ruleList = res.data.attributeContent.template
            this.isShow = true
      });
    }
  }
};
</script>
<style lang="less">
    // .ivu-input-search:hover {
    //     background: red !important;
    //     border-color: red !important;
    // }
    .select-position {
      .has-gutter {
        .cell {
          color: #515a6e !important;
        }
      }
      
      .ivu-form-item-content .ivu-input-with-search .ivu-input-search{
        background:#ff6f4b !important;
      }
      .ivu-form-item-content .ivu-input-with-search .ivu-input-search:hover{
          border: 1px solid #dcdee2 !important;
      }
      .extendedAttrTitle {
          font-size: 14px;
          font-weight: bold;
          border-bottom: 1px solid #f5f5f5;
          line-height: 40px;
          margin-bottom: 20px;
      }
    }
    

</style>